<template>
  <div>
    <el-card>
      <el-row>
        <el-space wrap>
          <el-button type="primary" :icon="Plus" @click="toCreate()" v-button="['api:message:emailaccount:create']">
            新增
          </el-button>
          <el-button type="primary" :icon="Download" @click="exportExcel()"
            v-button="['api:message:emailaccount:exportexcel']">
            导出
          </el-button>
          <el-upload class="upload" v-button="['api:message:emailaccount:importexcel']" :show-file-list="false"
            :http-request="importExcel" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            <el-button :icon="Upload" type="primary">导入</el-button>
          </el-upload>
        </el-space>
      </el-row>
      <el-row>
        <el-table :data="tableList" :border="true" style="width: 100%"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
          <el-table-column prop="email" label="邮箱地址" width="180" />
          <el-table-column prop="displayName" label="显示名称" width="180" />
          <el-table-column prop="host" label="主机" />
          <el-table-column prop="port" label="端口" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="enableSsl" label="是否SSL" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" :icon="EditPen" @click="toEdit(scope.row)"
                v-button="['api:message:emailaccount:update']">
                修改
              </el-button>
              <el-popconfirm title="确定要删除这条数据?" @confirm="toDelete(scope.row)">
                <template #reference>
                  <el-button type="danger" :icon="Delete" v-button="['api:message:emailaccount:delete']">
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
          @change="query()"></Pagination>
      </el-row>
    </el-card>

    <!-- 新增和修改弹框 -->
    <el-dialog v-model="dialogVisible" title="邮箱账户" width="600" :draggable="true" :close-on-click-modal="false">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="邮箱地址" prop="email">
              <el-input placeholder="邮箱地址" v-model="form.email" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示名称" prop="displayName">
              <el-input placeholder="显示名称" v-model="form.displayName" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主机" prop="host">
              <el-input placeholder="主机" v-model="form.host" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口" prop="port">
              <el-input placeholder="端口" v-model="form.port" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input placeholder="用户名" v-model="form.username" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input placeholder="密码" type="password" v-model="form.password" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否SSL" prop="enableSsl">
              <el-radio-group v-model="form.enableSsl">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否发送凭证" prop="useDefaultCredentialss">
              <el-radio-group v-model="form.useDefaultCredentials">
                <el-radio :value="true">是</el-radio>
                <el-radio :value="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { Plus, Delete, EditPen, Search, Download, Upload } from "@element-plus/icons-vue";
import EmailAccountApi, {
  EmailAccountEdit,
  EmailAccountModel,
  EmailAccountQuery,
} from "@/api/message/email/emailAccount";
import { EditEnum } from "@/enums/EditEnum";
import successMsg from "@/utils/successMsg";
import { UploadRequestOptions } from "element-plus";
import { saveAsExcel } from "@/utils/saveAsUtils";
defineOptions({
  name: "emailaccount",
  inherititems: false,
});

const tableList = ref<EmailAccountModel[]>();

//查询条件
const search = reactive<EmailAccountQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await EmailAccountApi.query(search);
  search.total = totalCount;
  tableList.value = dataList;
};

const form = ref<EmailAccountEdit>();
const dialogVisible = ref(false);
const editType = ref<EditEnum>();
const toEdit = (row: EmailAccountEdit) => {
  editType.value = EditEnum.update;
  dialogVisible.value = true;
  form.value = { ...row };
};

const toCreate = () => {
  editType.value = EditEnum.create;
  dialogVisible.value = true;
  form.value = {
    enableSsl: true,
    useDefaultCredentials: false,
  };
};

const exportExcel = async () => {
  const response = await EmailAccountApi.exportExcel();
  saveAsExcel(response);
};

const importExcel = async (options: UploadRequestOptions) => {
  const { success, message } = await EmailAccountApi.importExcel(options.file);
  successMsg(success, message, async () => {
    await query();
  });
};

const save = async () => {
  const { success, message } = await EmailAccountApi[EditEnum[editType.value]](form.value);
  successMsg(success, message, async () => {
    dialogVisible.value = false;
    await query();
  });
};

const toDelete = async (row: EmailAccountModel) => {
  const { success, message } = await EmailAccountApi.delete(row.id);
  successMsg(success, message, await query());
};
</script>

<style lang="scss" scoped>
.upload {
  display: flex;
}
</style>
